<template>
  <div class="inner-page">
    <div class="page-category">
      <router-link v-for="(item,key) of cate" :key="key" :to="item.to">{{item.title}}</router-link>
      <a href="javascript:;" @click="logout" class="pull-right">Log out</a>
    </div>

    <section class="section-container">
      <div class="section-wrap">
        <div class="section-head">
          <h1 class="info-title">{{$route.meta.title}}</h1>
        </div>
        <div class="section-body">
          <template v-if="$route.name === 'UserInformation'">
            <div class="basic-info">
              <p>
                Country:
                <span>{{userInfo.country}}</span>
              </p>
              <p>
                City:
                <span>{{userInfo.city}}</span>
              </p>
              <p>
                Nominator(default):
                <span>{{userInfo.nominator}}</span>
              </p>
            </div>
            <ValidationObserver v-slot="{ invalid }">
              <form @submit.prevent="infoSubmit" class="form-wrap login-form">
                <Validater
                  name="email"
                  class="form-item"
                  rules="required|email"
                  v-slot="{ errors }"
                >
                  <label
                    for="email"
                    class="form-control"
                  >Email *(This email is the ONLY email to receive final results and invitations)</label>
                  <input
                    class="bg-primary"
                    type="text"
                    v-model="userInfo.email"
                    id="email"
                    autocomplete="off"
                  />
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>
                <Validater
                  class="form-item mt-30"
                  name="fullname"
                  rules="required"
                  v-slot="{ errors }"
                >
                  <label
                    for="fullname"
                    class="form-control"
                  >Full Name *(Please provide contact person's or your full name)</label>
                  <input
                    type="text"
                    placeholder="Full Name"
                    v-model="userInfo.fullName"
                    id="fullname"
                    autocomplete="off"
                  />
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>
                <Validater
                  name="mobile"
                  class="form-item mt-30"
                  rules="required"
                  v-slot="{ errors }"
                >
                  <label
                    for="mobile"
                    class="form-control"
                  >Mobile *(Please provide a valid contact number)</label>
                  <input type="text" id="mobile" v-model="userInfo.mobile" autocomplete="off" />
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>
                <Validater
                  name="Second Contact"
                  class="form-item mt-30"
                  rules="required"
                  v-slot="{ errors }"
                >
                  <label
                    for="second_contact"
                    class="form-control"
                  >Secondary contact *(Please provide another contact number (e.g. office tel) in case of emergencies)</label>
                  <input
                    type="text"
                    id="second_contact"
                    v-model="userInfo.secondaryContact"
                    autocomplete="off"
                  />
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>
                <Validater
                  name="Address"
                  class="form-item mt-30"
                  rules="required"
                  v-slot="{ errors }"
                >
                  <label
                    for="address"
                    class="form-control"
                  >Shipping Address *(Please provide the full address to receive certificate (if winner) and your tangible project)</label>
                  <input type="text" id="address" v-model="userInfo.address" autocomplete="off" />
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>
                <div class="btn-wrap">
                  <Button text="SAVE" type="submit" :disabled="invalid" />
                </div>
              </form>
            </ValidationObserver>
          </template>
          <template v-else-if="$route.name === 'UserInfoDesigner'">
            <div class="basic-info">
              <p>
                Country:
                <span>{{userInfo.country}}</span>
              </p>
              <p>
                City:
                <span>{{userInfo.city}}</span>
              </p>
              <p>
                Nominator(default):
                <span>{{userInfo.nominator}}</span>
              </p>
            </div>
            <ValidationObserver v-slot="{ invalid }">
              <form @submit.prevent="designSubmit" class="designer-form">
                <div class="form-item">
                  <div class="radio-wrap">
                    <input
                      type="radio"
                      name="identify"
                      v-model="design_form.identify"
                      id="pro"
                      value="professinal"
                    />
                    <label for="pro">Professional</label>
                  </div>
                  <div class="radio-wrap">
                    <input
                      type="radio"
                      name="identify"
                      v-model="design_form.identify"
                      id="student"
                      value="student"
                    />
                    <label for="student">Student</label>
                  </div>
                </div>

                <div class="form-item">
                  <div class="radio-wrap">
                    <input
                      type="radio"
                      name="team"
                      v-model="design_form.isTeam"
                      id="team"
                      value="team"
                    />
                    <label for="team">Team{{design_form.isTaem}}</label>
                  </div>
                  <div class="radio-wrap">
                    <input
                      type="radio"
                      name="team"
                      v-model="design_form.isTeam"
                      value="individual"
                      id="individual"
                    />
                    <label for="individual">Individual</label>
                  </div>
                </div>
                <div class="inline-form mt-30">
                  <Validater
                    name="Full Name"
                    class="form-item"
                    rules="required"
                    v-slot="{ errors }"
                  >
                    <label for="fullname" class="form-control">Full Name*</label>
                    <input
                      type="text"
                      id="fullname"
                      v-model="designSubmit.fullname"
                      autocomplete="off"
                    />
                    <span class="input-error">{{errors[0]}}</span>
                  </Validater>
                  <Validater name="birth" class="form-item" rules="required" v-slot="{ errors }">
                    <label for="birth" class="form-control">Date of Birth*</label>
                    <input type="date" id="birth" v-model="design_form.birth" autocomplete="off" />
                    <span class="input-error">{{errors[0]}}</span>
                  </Validater>
                </div>
                <Validater
                  name="Self introduction*"
                  class="form-item mt-30"
                  rules="required"
                  v-slot="{ errors }"
                >
                  <label for="description" class="form-control">Self introduction*</label>
                  <textarea
                    name="description"
                    id="description"
                    cols="30"
                    rows="10"
                    v-model="design_form.self_intro"
                  ></textarea>
                  <span class="input-error">{{errors[0]}}</span>
                </Validater>

                <div class="form-item upload">
                  <input type="file" class="d-none" name="profile" id="profile" />
                  <label for="profile">
                    Profile Picture
                    <div class="wcover-intro">
                      <h4>Add a personal photo</h4>
                    </div>
                  </label>
                </div>
                <div class="btn-wrap">
                  <Button text="SAVE" type="submit" :disabled="invalid" />
                </div>
              </form>
            </ValidationObserver>
          </template>
          <template v-else-if="$route.name === 'UserInfoProject'">
            <a href="javascript:;" @click="add_project" class="add-project-btn">
              ADD A NEW PROJECT
            </a>
          </template>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Button from "@/components/Button";
export default {
  name: "Information",
  components: {
    Button,
  },
  data() {
    return {
      cate: [
        {
          title: "Account Information",
          to: { name: "UserInformation" },
        },
        {
          title: "Designer Information",
          to: { name: "UserInfoDesigner" },
        },
        {
          title: "Project Information",
          to: { name: "UserInfoProject" },
        },
      ],
      design_form: {
        identify: "",
        isTeam: "",
        fullname: "",
        birth: "",
        self_intro: "",
        profile: [],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    infoSubmit() {
      this.$store.dispatch("UP_USR", this.userInfo).then((res) => {
        this.toast({
          text: "save successful",
        });
      });
    },
    add_project() {
      this.toast({
        text: 'Sorry,Registration has ended. '
      })
    },
    logout() {
      this.$store.commit("LOGOUT");
      setTimeout(() => {
        this.$router.push({ name: "Home" });
      }, 500);
    },
    toast({ title = "Notice", text }) {
      this.$modal.show("dialog", {
        title,
        text,
        buttons: [
          {
            title: "Close",
            handler: () => {
              this.$modal.hide("dialog");
            },
          },
        ],
      });
    },
    designSubmit() {},
    projectSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
section.section-container {
  .section-head {
    .info-title {
      padding-bottom: 25px;
      font: 700 32px/1.5 "Futura";
      color: #202020;
      letter-spacing: 0.01em;
      text-align: center;
      border-bottom: 1px solid #dbdbdb;
    }
  }
  .section-body {
    .basic-info {
      display: flex;
      margin: 50px 0 70px 0;
      p {
        font-size: 20px;
        margin-right: 50px;
        color: #808080;
        span {
          color: #202020;
          margin-left: 5px;
        }
      }
    }
    .designer-form {
      > .form-item {
        &:nth-child(1),
        &:nth-child(2) {
          display: flex;
          margin-top: 30px;
        }
      }
      .radio-wrap {
        display: flex;
        align-items: center;
        margin-right: 80px;
        label {
          font-size: 20px;
        }
        input {
          width: 22px;
          height: 22px;
          margin-right: 15px;
        }
      }
      .inline-form {
        display: flex;
        > .form-item {
          flex: 1;
          &:first-child {
            margin-right: 40px;
          }
        }
      }
      .form-item.upload {
        margin-top: 70px;
        display: inline-block;
        vertical-align: top;
        label {
          cursor: pointer;
          font-size: 24px;
          .wcover-intro {
            margin-top: 0.8em;
            display: block;
            width: 360px;
            height: 240px;
            line-height: 240px;
            font-size: 24px;
            color: #fff;
            background-color: grey;
            text-align: center;
            position: relative;
            h4 {
              font-weight: normal;
            }
            &::after {
              content: "\e604";
              position: absolute;
              top: 20px;
              right: 20px;
              font-family: "iconfont";
              font-size: 14px;
              color: #fff;
              line-height: normal;
            }
          }
        }
      }
    }
    .add-project-btn {
      display: inline-block;
      vertical-align: top;
      font-size: 20px;
      line-height: 60px;
      padding: 0 3em;
      background-color: #2537b5;
      color: #fff;
      letter-spacing: 0.05em;
      margin-top: 30px;
    }
  }
}
.page-category {
  a.router-link-active {
    text-decoration: none;
  }
  a.router-link-exact-active {
    text-decoration: underline;
  }
}
</style>